<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
      center
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("dedicated_contribution_plan") }}</span>
          </div>
          <el-descriptions :column="1">
            <el-descriptions-item :label="$t('employer')">{{
              form.employerName
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('plan_type')">{{
              dict.label.contribution_plan_type[form.schemeType]
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('plan_name')" :span="2">{{
              form.schemeName
            }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("social_provident") }}</span>
          </div>
          <el-card class="box-card" style="margin-bottom: 20px">
            <div slot="header" class="clearfix">
              <span>{{ $t("social_insurance") }}</span>
            </div>
            <el-table :data="securityVOList" border :max-height="tableHeight">
              <el-table-column
                :label="$t('payment_location')"
                align="center"
                prop="city"
                width="150"
              >
              </el-table-column>
              <el-table-column
                :label="$t('local_resident')"
                align="center"
                prop="isLocal"
                width="150"
              >
              </el-table-column>
              <el-table-column
                :label="$t('payment_base')"
                align="center"
                prop="paymentBase"
              >
              </el-table-column>
              <el-table-column
                :label="$t('welfare_rank')"
                align="center"
                prop="grade"
              >
              </el-table-column>
              <el-table-column
                :label="$t('remarks')"
                align="center"
                prop="remark"
              >
              </el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" style="margin-bottom: 20px">
            <div slot="header" class="clearfix">
              <span>{{ $t("housing_provident_fund") }}</span>
            </div>
            <el-table :data="fundVOList" border>
              <el-table-column
                :label="$t('payment_location')"
                align="center"
                prop="city"
                width="150"
              >
              </el-table-column>
              <el-table-column
                :label="$t('payment_base')"
                align="center"
                prop="paymentBase"
                width="150"
              >
              </el-table-column>
              <el-table-column
                :label="$t('personal_contribution_rate')"
                align="center"
                prop="individualProportion"
                width="150"
              >
              </el-table-column>
              <el-table-column
                :label="$t('company_contribution_rate')"
                prop="unitProportion"
                align="center"
                width="150"
              >
              </el-table-column>
              <el-table-column
                :label="$t('remarks')"
                align="center"
                prop="remark"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card class="box-card" style="margin-bottom: 20px">
            <div slot="header" class="clearfix">
              <span>{{ $t("personal_income_tax") }}</span>
            </div>
            <el-table :data="taxVOList" border>
              <el-table-column
                :label="$t('special_additional_deduction')"
                align="center"
                prop="specialDeduction"
                width="150"
              >
              </el-table-column>
              <el-table-column
                :label="$t('deduction_amount')"
                align="center"
                prop="deductionAmount"
                width="150"
              >
              </el-table-column>

              <el-table-column
                :label="$t('effective_date')"
                align="center"
                prop="dateDffective"
              >
              </el-table-column>
              <el-table-column
                :label="$t('expiry_date')"
                align="center"
                prop="dateExpiration"
              >
              </el-table-column>
              <el-table-column :label="$t('status')" align="center" width="150">
                <template slot-scope="scope">
                  {{ getStatusText(scope.row) }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">{{
          $t("confirm")
        }}</el-button>
        <el-button @click="open = false">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  dicts: ["contribution_plan_type", "yes_or_no"],
  data() {
    return {
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      searchLoading: false,
      planList: [],
      //表格数据
      securityVOList: [],
      fundVOList: [],
      taxVOList: [],
      employerList: [],
      planListIndex: null,
    };
  },
  methods: {
    handlePlan(row) {
      this.form = row;
      this.securityVOList = this.form.securityDTOList || [];
      this.fundVOList = this.form.fundDTOList || [];
      this.taxVOList = this.form.taxDTOList || [];
      this.open = true;
    },
    getStatusText(row) {
      if (row.dateExpiration && row.dateDffective) {
        const newDataTime = new Date().getTime();
        const endDateTime = new Date(row.dateExpiration).getTime();
        const startDateTime = new Date(row.dateDffective).getTime();
        if (startDateTime > newDataTime) {
          return this.$t("not_effective");
        } else if (endDateTime > newDataTime) {
          return this.$t("in_effect");
        } else {
          return this.$t("expired");
        }
      } else {
        return "";
      }
    },
  },
};
</script>
